* { margin: 0; padding: 0; }

/* reset */
button {
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:active {
  border: none;
}
a {
  text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
  color: #333333;
}
input {
  outline-style: none;
}

.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-j-center { display: flex; justify-content: center; }
.flex-a-center { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }

.full-width { width: 100%; }
.full-height { height: 100%; }

#app {
  width: 100vw;
  height: 100vh;
  color: #333333;
  background-color: #33CC99;
}

/* 首页 */
.welcome .slogan {
  font-size: 32px;
  color: #ffffff;
  margin-bottom: 30px;
}
.welcome .go-start {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 10px 0;
  width: 200px;
  background: #ffffff;
  border-radius: 10px;
}
@media screen and (max-width: 420px) {
  .welcome .slogan {
    font-size: 26px;
  }
  .welcome .go-start {
    padding: 8px 0;
    width: 150px;
    font-size: 14px;
  }
}
@media screen and (max-width: 375px) {
  .welcome .slogan {
    font-size: 20px;
  }
}

/* 登录页 */
.login-form {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 10px;
}
.login-form .login-form-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.login-form .form-item {
  padding: 10px 0;
}
.login-form .form-item .icon {
  display: block;
  padding: 5px;
  width: 30px;
  height: 30px;
  border: 1px solid #999999;
  border-right: none;
  border-radius: 5px 0 0 5px;
}
.login-form .form-item input {
  width: 300px;
  border: 1px solid #999999;
  border-radius: 0 5px 5px 0;
  color: #333333;
}
.login-form .form-item input:focus {
  border-color:  #f58304;
  border-width: 2px;
}
.login-form .form-item input.checkbox {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.login-form .form-item .label {
  font-size: 14px;
  color: #f58304;
}
.login-form .login-button {
  padding: 8px;
  margin-top: 20px;
  color: #ffffff;
  background: #f58304;
}

.message {
  width: 200px;
  position: fixed;
  top: 100px;
  left: calc(50% - 100px);
  border-radius: 5px;
  z-index: 99;
  padding: 10px 0;
  text-align: center;
  border: 1px solid #ffffff;
  animation: easeIn 200ms ease-in;
  -moz-animation: easeIn 200ms ease-in;
  -webkit-animation: easeIn 200ms ease-in;
  -o-animation: easeIn 200ms ease-in;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
@keyframes easeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.message-success {
  border-color: #e1f3d8;
  background-color:#f0f9eb;
  color: #67c23a;
}
.message-warning {
  border-color: #faecd8;
  background-color:#fdf6ec;
  color: #e6a23c;
}
.message-error {
  border-color: #fde2e2;
  background-color:#fef0f0;
  color: #f56c6c;
}
.message-info {
  border-color: rgb(215, 237, 247);
  background-color:#e0edfa;
  color: #419cf7;
}